为什么15%+85%不给100%.Web布局HTML/css |
您所在的位置：网站首页 › blazor 布局 › 为什么15%+85%不给100%.Web布局HTML/css |
为什么15%+85%不给100%.Web布局HTML/css
|
HTML中的绝对初学者.这是一个布局问题.我有一个标题,width 100% 我希望有一个nav导航部分应该是15%页面,而其余部分85%应该显示一些内容.结束网页footer. dada ma WTH M样式: body { margin:40px; padding:5px } #header { background-color:black; color:white; text-align:center; padding:5px; height:200px; width:100% } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:15%; float:left; padding:5px; display:inline-block; } #section { float:left; background-color: red; width:85%; display:inline-block; padding:5px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; width:100%; }但我收到的是我解释为15%和85%不等于100%(WTH相对于nav？我测试了83%而且是正确的但是"红色"并不完全与header
我该怎么做才能做到对？ 1> noa-dev..： 这里的问题是填充被添加到您的容器宽度.因此,每侧85%宽度+ 5px,导致宽度大于85%. 您可以通过添加以下代码来解决此问题: box-sizing: border-box; #nav { line-height:30px; background-color:#eeeeee; height:300px; width:15%; float:left; padding:5px; display:inline-block; box-sizing:border-box; } #section { float:left; background-color: red; width:85%; display:inline-block; padding:5px; box-sizing:border-box; margin-left:-5px; /* margin-left: -5px has to be done to fix the display:inline-block; default margin*/ }另外我不建议对一个元素使用inline-bock和float.你应该决定float还是inline-block. |
【本文地址】
今日新闻 |
推荐新闻 |